<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://unpkg.com/vue"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .container {
      position: absolute;
      width: 200px;
      height: 400px;
      background-color: pink;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  </style>
</head>

<body>
  <div id="root"></div>
  <script>
    /* 
      1. options api 存在的问题
      - 查看代码，分析功能时不方便
      2. composition api中的setup函数
      3. 基本使用实例
      - 在created实例被完全初始化之前执行
      - 返回的数据、方法可暴露给外部使用
      - 使用setup函数，不能再使用this
        - 因为setup会在实例初始化之前执行，此时获取不到vue实例
      - setup函数挂载在$options中
      - setup中无法调用外部的数据/方法，外部的方法可以调用setup函数
    */

    const app = Vue.createApp({
      template: `
      <div class="container" >
        {{name}} -- {{getAge()}}
      </div>
    `,
      methods: {
        init() {
          console.log('外部函数可以调用setup函数', this.$options.setup());
        }
      },
      setup() {
        console.log('setup先执行');
        // setup函数无法调用外部函数，因为实例未初始化
        // this.init()
        return {
          name: 'lxw',
          age: 33,
          getAge() {
            console.log('name', this.name);
            return this.age
          }
        }
      },
      created() {
        this.init()
        console.log('created后执行', this.$options);
      },
    })
    const vm = app.mount('#root');

  </script>
</body>

</html>